import React from 'react';
import ReactEcharts from '@/components/Echarts';
import { Empty } from 'antd';
import { history } from 'umi'
import Bar from '../Bar';

const colors = [
    '#3BA0FF',
    '#FAD337',
    '#F2637B',
    '#36CBCB',
    '#FFA808',
    '#4ECB74',
    '#975FE4',
    '#FFBCD9',
    '#CB6137',
    '#5D7092'
];

const DepartmentChart = ({ data = [], query }) => {
    const [activeId, setActiveId] = React.useState('');

    const [first = [], secondary = []] = data;
    // const firstName = first.map(({ departmentName }) => departmentName || '');

    const firstData = first.map(({ departmentName, evalPeopleNum, departmentId }) => ({
        value: evalPeopleNum || 0,
        name: departmentName || '',
        id: departmentId
    }));

    React.useEffect(() => {
        if (activeId === '' && firstData.length > 0) {
            setActiveId(firstData[0].id);
        }
    }, [firstData]);

    const secondaryData = secondary
        .map(({ id, departmentName, evalPeopleNum, ...rest }) => ({
            ...rest,
            value: evalPeopleNum || 0,
            name: departmentName || ''
        }))
        .filter(item => item.firstLevelDepartmentId === Number(activeId));

    const secondaryName = secondary
        .filter(item => item.firstLevelDepartmentId === Number(activeId))
        .map(({ departmentName }) => departmentName || '');

    const handleSelect = id => {
        setActiveId(id);
    };

    const handleChartClick = ({ data: rawData = {} }) => {
        const { firstLevelDepartmentId } = rawData;
        history.push({
            pathname: '/stat/workStat/workOverview/department/overview',
            query: {
                ...query,
                departmentId: firstLevelDepartmentId
            }
        });
    };

    return (
        <>
            <ReactEcharts
                style={{
                    width: '100%',
                    height: 30,
                    marginBottom: 16
                }}
                option={{
                    color: colors,
                    legend: {
                        type: 'scroll',
                        top: 5,
                        itemGap: 16,
                        data: firstData.map(item => item.name),
                        textStyle: {
                            color: '#999',
                            fontSize: 12
                        }
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: 0,
                            tooltip: {
                                show: false
                            },
                            center: ['50%', '70%'],
                            data: firstData,
                            label: {
                                normal: {
                                    show: false
                                }
                            },
                            animation: false
                        }
                    ]
                }}
            />
            <Bar colors={colors} data={firstData} activeId={activeId} onSelect={handleSelect} />
            {secondaryData.length === 0 ? (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} style={{ marginTop: 150 }} />
            ) : (
                <ReactEcharts
                    onEvents={{ click: handleChartClick }}
                    option={{
                        color: ['#ffa22d'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            },
                            formatter(params) {
                                const { data: rowData = {} } = params[0];
                                const {
                                    name = '',
                                    value: evalPeopleNum = 0,
                                    totalPeopleNum = 0,
                                    totalTaskNum = 0,
                                    doneTaskNum = 0,
                                    overdueTaskNum = 0,
                                    planPerCapitaStandardWorkloadNum = 0,
                                    actualPerCapitaWorkloadNum = 0
                                } = rowData;

                                const final = `
                                ${name} <br/>
                                员工 / 考核员工： ${totalPeopleNum} / ${evalPeopleNum} <br/>
                                总任务 / 已完成/逾期： ${totalTaskNum} / ${doneTaskNum} / ${overdueTaskNum}<br/>
                                计划 / 实际人均工作量： ${planPerCapitaStandardWorkloadNum} / ${actualPerCapitaWorkloadNum}<br/>
                                `;
                                return final;
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: secondaryName,
                                axisTick: {
                                    show: false
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: 'rgba(0, 0, 0, 0.1)'
                                    }
                                },
                                axisLabel: {
                                    color: 'rgba(0, 0, 0, 0.45)',
                                    interval: 0
                                    // rotate: 50,
                                    // margin: 18
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                axisLine: { show: false },
                                axisTick: { show: false }
                            }
                        ],
                        series: [
                            {
                                name: '人数',
                                type: 'bar',
                                barWidth: '32px',
                                data: secondaryData
                            }
                        ]
                    }}
                />
            )}
        </>
    );
};

export default DepartmentChart;
